<template>
  <el-dialog title="商品查看" :visible.sync="dialogVisible" v-if="dialogVisible" top="200px" width="960px">
    <div v-if="goodsInfo">
      <el-descriptions title="" :labelStyle="{width:'80px'}" :column="3" border>
        <el-descriptions-item label="供货人">{{goodsInfo.supplyName}}</el-descriptions-item>
        <el-descriptions-item label="游戏名称">{{goodsInfo.gameName}}</el-descriptions-item>
        <el-descriptions-item label="区服">
          {{goodsInfo.systemName}}{{goodsInfo.carrierName}}{{goodsInfo.groupName}}{{goodsInfo.serverName}}
        </el-descriptions-item>
        <el-descriptions-item label="商品编号">
          {{goodsInfo.id}}
        </el-descriptions-item>
        <el-descriptions-item label="实名" :span="3">{{goodsInfo.shiming||'暂无'}}</el-descriptions-item>
        <el-descriptions-item label="商品标题" :span="3">{{goodsInfo.title}}</el-descriptions-item>
        <!-- <el-descriptions-item label="游戏密码" :span="3">{{ruleForm.accountPassword}}</el-descriptions-item> -->
        <el-descriptions-item label="商品描述" :span="3">
          <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{goodsInfo.des}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="图片" :span="3">
          <div class="img-box flex">
            <div v-for="(item, ind) in desImglist" :key="item">
              <img :src="item" @click="review(desImglist,ind)" />
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="供货价">
          <span style="color: #6c5dd3;font-size: 18px;">¥{{ goodsInfo.price }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="你的售价">
          <span style="color: red;font-size: 18px;">¥{{ goodsInfo.newPrice }}</span>
        </el-descriptions-item>

      </el-descriptions>
    </div>
    <div class="center" style="margin-top: 15px;">
      <el-button plain type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import goodsListApi from "../../../api/gameConfig/goodsList";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      goodsInfo: null,
      telInfo: {},
      desImglist: [],
    };
  },
  created() {},
  methods: {
    open(goodsInfo) {
      this.goodsInfo = goodsInfo;
      this.desImglist = []
      this.getImgArr();
      this.dialogVisible = true;
      // this.getTelInfo();
    },
    // 获取详情图
    getImgArr() {
      goodsListApi
        .getGoodsImgArr({
          id: this.goodsInfo.id,
        })
        .then((res) => {
          const arrtemp = [];
          if (res.code == 200 && res.data.urlArr && res.data.urlArr.length) {
            const arr = res.data.urlArr;
            if (arr.length) {
              arr.forEach((r) => {
                arrtemp.push(r.url);
              });
            }
          }
          if (this.goodsInfo.titleImg) {
            arrtemp.unshift(this.goodsInfo.titleImg);
          }
          this.desImglist = arrtemp;
        });
    },
    review(list, ind) {
      this.$viewerApi({
        images: list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    getTelInfo() {
      // if (!this.goodsInfo.telid) {
      //   return;
      // }
      // goodsListApi.getaccountTelinfo(this.goodsInfo.telid).then((res) => {
      //   if(res.data) this.telInfo = res.data
      // });
    },

    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.img-box {
  flex-wrap: wrap;
  img {
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
}
</style>
